<template>
  <h2>拖拽类</h2>

  <div ref="wrapDiv" class="wrapDiv">
    <el-select v-for="item in data" :key="item.id" style="width:100%" v-model="item.value" placeholder="Select">
      <el-option
        v-for="item in data"
        :key="item.id"
        :label="item.label"
        :value="item.id"
      />
    </el-select>
  </div>

  <!-- 数据的响应式展示 -->
  <p v-for="item in data" :key="item">{{ item.id }}</p>
</template>

<script setup>
import Drag from './drag' // 引入自己封装的Drag类
import { shallowRef, onMounted, reactive } from 'vue'
let wrapDiv = shallowRef() // 获取dom，这里我不希望监听他的响应式，所以没用ref
let data = reactive([
  {
    id: 1,
    label: '苹果',
    value: ''
  },
  {
    id: 2,
    label: '香蕉',
    value: ''
  },
  {
    id: 3,
    label: '榴莲',
    value: ''
  },
  {
    id: 4,
    label: '茄子',
    value: ''
  },
  {
    id: 5,
    label: '菠萝',
    value: ''
  },
  {
    id: 6,
    label: '草莓',
    value: ''
  },
  {
    id: 7,
    label: '石榴',
    value: ''
  },
  {
    id: 8,
    label: '奥里给',
    value: ''
  },
  {
    id: 9,
    label: '葡萄',
    value: ''
  },
  {
    id: 10,
    label: '猕猴桃',
    value: ''
  }
])
onMounted(() => {
  let params = {
    el: wrapDiv.value, // 容器，只能放一个根节点
    vmodel: true, // 是否处理数据的响应
    data: data  // 数据
  }
  Drag.init(params) // 调用拖拽类的方法
})
</script>
<style scoped lang="scss">
.wrapDiv {
  border: 1px solid #dfdbdb;
  padding: 10px;
}
.el-select {
  margin-bottom: 20px;
}
.move {
  background: rgba(48,137,220,.1);
  color: #3089dc;
  box-sizing: border-box;
  border: 1px dashed #3089dc;
  border-top: 3px solid #3089dc;
}
</style>
